<template>
  <div class="add-material">
    <header>
      <p>添加用料到{{title}}</p>
      <span @click="materialList">完成</span>
    </header>
    <div class="material-content">
      <label for="text">用料名</label>
      <input
        type="text"
        id="text"
        v-model="materialMenu.name"
        placeholder="请输入用料名"
      />
    </div>
    <div class="material-content">
      <label for="text">数目｜备注</label>
      <input
        type="text"
        id="text"
        v-model="materialMenu.number"
        placeholder="请输入树木,备注等"
      />
    </div>
  </div>
</template>

<script>
export default {
  props: ["title", 'index'],
  data() {
    return {
      materialMenu: {
        name: "",
        number: "",
      },
    };
  },
  methods: {
    materialList() {
      if (!this.materialMenu.name && !this.materialMenu.number) return;
      this.$emit("materialList", this.materialMenu, this.index);
    },
  },
};
</script>

<style lang="sass">
.add-material
    width: 100%
    box-sizing: border-box
    background: #fff
    padding: 30px 20px
    height: 80vh
    position: fixed
    bottom: 0
    left: 0
    header
        display: flex
        justify-content: space-between
        align-items: center
        p
            font-size: 26px
        span
            color: orange
    .material-content
        text-align: left
        display: flex
        align-items: center
        margin-top: 30px
        label
            // margin-right: 30px
            width: 110px
            line-height: 40px
            height: 40px
            font-size: 18px
        input
            border: none
                bottom: 1px solid #999
            outline: 0
            color: #333
            height: 40px
            font-size: 20px
            width: 200px
            background: #fff
</style>